<template>
    <view class="content">
		<header>
			<div class="search-btn">
				<button size="mini" @click="name" class="button">
					<span style="color:#FFFFF0;font-family: NSimSun;font-weight: bold">{{inputValue}}账本 </span>
					<i class="bottom-arrow"></i>
				</button>
			</div>
		</header>
        <view class="info">
            <image :src="avatarUrl"></image>
			<p class="info_name"><span>{{userName}}</span> <i class="iconfont icon-nan"></i></p>
			<div class="info_item">
				<p>16</p>
				<p>收入</p>
			</div>
			<div class="info_item">
				<p>32</p>
				<p>支出</p>
			</div>
			<div class="info_item">
				<p>3</p>
				<p>结余</p>
			</div>
        </view>
		<sen-set-picker ref="setpicker" :shixian="shixian" @quxiaoButton="quxiaobutton" @quedingButton="quedingbutton"></sen-set-picker>
    </view>
</template>

<script>
	import senSetPicker from '@/components/sen-pickerview/picker-view-set.vue'
    import {
        mapState,
        mapMutations
    } from 'vuex'
	

    export default {
		components: {
			senSetPicker
		},
        computed: mapState(['forcedLogin', 'userName', 'avatarUrl']),
        onLoad() {
			uni.checkSession({
				fail() {
					uni.clearStorage()
				}
			})
			
			if (!uni.getStorageSync('ysjz_hasLogin')) {
				this.logout();
                uni.showModal({
                    title: '未登录',
                    content: '您未登录，需要登录后才能继续',
                    /**
                     * 如果需要强制登录，不显示取消按钮
                     */
                    showCancel: !this.forcedLogin,
                    success: (res) => {
                        if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
                            if (this.forcedLogin) {
                                uni.reLaunch({
                                    url: '../login/login'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '../login/login'
                                });
                            }
                        }
                    }
                });
            } 
			else {
				this.login({
					"nickName": uni.getStorageSync("ysjz_userName"),
					"avatarUrl": uni.getStorageSync("ysjz_avatarUrl"),
					"openid": uni.getStorageSync("ysjz_openid"),
					"sessionKey": uni.getStorageSync("ysjz_session_key")
				});
			}
        },
		data() {
			const currentDate = this.getDate({
				format: true,
			});
			return {
				inputValue : currentDate,
				shixian : false
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			name : function () {
					this.$refs.setpicker.confirm(this.inputValue);
					this.shixian = true;				
			},
			quxiaobutton : function () {
					this.shixian = false;
			},
			quedingbutton : function(bangdingyear,bangdingmonth,bangdingday){
					this.shixian = false;
					this.inputValue = bangdingyear + "-" + bangdingmonth;
			},
			getDate(type) {
				const date = new Date();
			
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}else if(type === 'now') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
			
				return `${year}-${month}`;
			}
		}
    }
</script>

<style>
    *{
    	margin: 0;
    	padding: 0;
    	font-family: "微软雅黑";
    }
    header{
    	/* 头部包含背景图 */
    	background-color: #ffda19;
    	width: 100%;
    	overflow: hidden;
    	
    	height: 160px;
    }
    header>p{
    	/* 放我的和关机图标 */
    	height: 50px;
    	line-height: 50px;
    }
    header>p>span:nth-of-type(1){
    	display: inline-block;
    	float: left;
    	padding-left: 16px;
    	font-size: 18px;
    	font-weight: bold;
    }
    header>p>span:nth-of-type(2){
    	display: inline-block;
    	float: right;
    	padding-right: 16px;
    }
    header>p>span:nth-of-type(2)>i{
    	font-size: 18px;
    	font-weight: bold;
    }
    
    
    .info{
    	/* 存放个人信息的 */
    	width: calc( 100% - 32px );
    	background-color: #FFFFFF;
    	margin-left: 16px;
    	margin-top: -48px;
    	float: left;
    	border-radius: 8px;
    	box-shadow: 0 0 6px rgba(255,218,25,0.6);
    }
    .info>image{
    	width: 66px;
    	height: 66px;
    	border-radius: 66px;
    	margin: 0 auto;
    	display: block;
    	margin-top: -33px;
    	border: 1px solid #ffda19;
    }
    .info_name{
    	text-align: center;
    	font-size: 16px;
    	color: #444444;
    	height: 30px;
    	line-height: 30px;
    }
    .info_text{
    	text-align: center;
    	height: 30px;
    	line-height: 30px;
    	font-size: 14px;
    	color: #6F6F6F;
    }
    .info_item{
    	width: calc( 100% / 3 );
    	float: left;
    	text-align: center;
    	padding: 4px 0;
    }
    .info_item>p:nth-of-type(1){
    	font-size: 12px;
    }
    .info_item>p:nth-of-type(2){
    	font-size: 14px;
    	color: #6F6F6F;
    }
    .info_item:nth-of-type(1){
    	border-radius: 0 0 0 8px;
    }
    .info_item:nth-last-of-type(1){
    	border-radius: 0 0 8px 0;
    }
    
    .iconCon{
    	/* 放功能的图标 */
    	width: 100%;
    	float: left;
    	overflow: hidden;
    	margin-top: 16px;
    	padding: 32px 0;
    }
    .iconCon>div{
    	float: left;
    	width: calc( 100% / 4 );
    	text-align: center;
    	
    }
    
    .ui-table{
    	float: left;
    	width: calc( 100% - 64px );
    	background-color: #FFFFFF;
    	border-top: 8px solid #EFEFF4;
    	padding: 0 32px;
    }
    .ui-table>div{
    	height: 50px;
    	line-height: 50px;
    	border-bottom: 1px solid #EFEFF4;
    }
    .ui-table>div>span{
    	float: left;
    }
    .ui-table>div>i{
    	float: right;
    }
    .icon_comment{
    	border-radius: 100px;
    	font-size: 20px;
    	width: 30px;
    	height: 30px;
    	display: inline-block;
    	line-height: 30px;
    	color: #FFFFFF;
    }
    
    .icon-xiezuo{
    	background-color: #fbdc58;
    }
    .icon-tupian{
    	background-color: #94ede2;
    }
    .icon-yinyue{
    	background-color: #bceccd;
    }
    .icon-shipin{
    	background-color: #ffbadc;
    }
	.search-btn{
		position: relative;
	}
	.button{
		background-color:transparent;
	}
	.button::after{
		border: none;
	}

	/*下箭头*/
	.bottom-arrow{
		width:0;
		height:0;
		display:block;
		position:relative;
		left:0;
		top:0;
		border-bottom:10px transparent dashed;
		border-left:10px transparent dashed;
		border-right:10px transparent dashed;
		border-top:10px white solid;
		overflow:hidden;
	}
</style>
